import React, { useState } from "react";
import "./index.css";
import { asyncLogin } from "../../actions/userAction";
import { useDispatch } from "react-redux";
import { useNavigate } from "react-router-dom";

export default function Home() {
  const [useraccount, setuseraccount] = useState("");
  const [userpwd, setuserpwd] = useState("");
  const dispatch: any = useDispatch();
  const navigate = useNavigate();

  let denglu = async (info: any) => {
    let { useraccount, userpwd } = info;
    if (info) {
      dispatch(asyncLogin({ useraccount, userpwd })).then(
        (res: any) => {
          // console.log(res);
          navigate("/mainhome/fitsthome");
        },
        (res: any) => {
          console.log(res);
        }
      );
    }
  };

  return (
    <div className="lic">
      <h2>登录</h2>
      <p>七尾医疗服务后台管理系统</p>
      <div className="homeinput1">
        账号
        <input
          type="text"
          value={useraccount}
          onChange={(e) => {
            setuseraccount(e.target.value);
          }}
        />
      </div>
      <div className="homeinput1">
        密码
        <input
          type="passworld"
          value={userpwd}
          onChange={(e) => {
            setuserpwd(e.target.value);
          }}
        />
      </div>
      <h6>忘记密码联系管理员</h6>
      <button
        className="btn"
        onClick={async () => {
          denglu({ useraccount, userpwd });
        }}>
        登录
      </button>
    </div>
  );
}
